<template>
    <div class="hotmovie">
        <div class="popular-film">
            <h5>最受好评的电影</h5>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="https://p1.meituan.net/170.230/moviemachine/12437324cea0f64762e61d3341f2743b243014.jpg" alt=""><span class='seegrade'>观众评分 9.2</span> <span class='filmname'>指环王</span></div>
                    <div class="swiper-slide"><img src="https://p0.meituan.net/170.230/movie/3ad18f011110130e927d50046fde86f71038961.jpg" alt=""><span class='seegrade'>观众评分 9.1</span> <span class='filmname'>星星之上</span></div>
                    <div class="swiper-slide"><img src="https://p0.meituan.net/170.230/moviemachine/58732574fbc2f64c04c3e825c058da7f16742753.jpg" alt=""><span class='seegrade'>观众评分 8.9</span> <span class='filmname'>哥斯拉大战..</span></div>
                    <div class="swiper-slide"><img src="https://p1.meituan.net/170.230/movie/5778f9b9f2909ba55eb99bec059cb5d22333886.jpg" alt=""><span class='seegrade'>观众评分 7.9</span> <span class='filmname'>你的婚礼</span></div>
                    <div class="swiper-slide"><img src="https://p1.meituan.net/170.230/movie/063be170e3b06db0b05d3bb338be1140855828.jpg" alt=""><span class='seegrade'>观众评分 8.6</span> <span class='filmname'>人之怒</span></div>
                </div>
            </div>
        </div>
    <van-list v-model="loading" :finished="finished" finished-text="-------我是有底线的-----" @load="onLoad">
      <van-card v-for="item in movieList" :key="item.id" @click="goDetail(item.id)">
            <template #title>
            <span class="title">
                {{item.nm}} 
            </span>
            <span class="type" v-if="item.version">
                <span class="typenum">{{item.version.substr(1,1)+item.version.substr(2,1).toUpperCase()}}</span><span class="imax">{{item.version.substr(3,10)}}</span>
            </span>
            </template>
            <template #desc>
            <div class="desc">
                <div v-if="item.wish" >
                    <span class="wish">{{item.wish}}</span>人想看
                </div>
                <div v-if="item.sc">
                观众评：<span class="grade">{{item.sc}}</span>
                </div>
                <div>主演：{{item.star}}</div>
                <div> {{item.showInfo}}</div>
            </div>
            </template>
            <template #thumb>
            <img :src="item.img.replace('/w.h','')" alt="" />
            </template>
            <template #footer>
                <van-button type="danger" size="small" v-if="item.globalReleased">购票</van-button>
                <van-button type="info" size="small" v-if="!item.globalReleased">预售</van-button>
            </template>
      </van-card>
    </van-list>
    </div>
</template>
<script>
import Vue from "vue";
import { Card, Tag, List,Button} from "vant";

import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";

import uri from '@/config/uri'
Vue.use(List);
Vue.use(Card);
Vue.use(Tag);
Vue.use(Button)
export default {
     data() {
        return {
        pageNum: 1,
        //
        list: [],
         // 确定加载状态的，是否处于加载中。在每次加载完毕后需要设置为false
        loading:false,
         // 确定是否全部请求完毕的，当所有的数据全部获取到后，需要将该值设置为true
        finished:false,
        movieIds:[],
        movieList:[],
        ids:""
        };
    },
    created(){
         this.$nextTick(() => {
            new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 30,
        });
         })
    },
     methods:{
        onLoad(){
            this.$http.get(uri.movieOnInfoList).then((req) => {
            
            // 将原先的数据与现在本次的数据做合并
            this.movieList = [...this.movieList,...req.movieList];
            console.log(this.movieList);
            req.movieIds.splice(0,11)
            this.movieIds = [...this.movieIds,...req.movieIds]
            console.log(this.movieIds);
            this.ids = this.movieIds.join(',')
            console.log(this.ids);
            // 本次请求已经完成
            this.loading=false; 
            this.$http.get(uri.moreComingList+'?token=&movieIds='+`${this.ids}`).then((req)=>{
                        console.log(req.coming);
                        this.movieList = [...this.movieList,...req.coming];
                        console.log(this.movieList);
                        this.finished =true;
                    })
            })
            
        },
        goDetail(id){
            this.$router.push('/film/:filmId='+id);
        }

    },
}
</script>
<style scoped>
.hotmovie {
    padding-top:120px;
}
.popular-film {
   
}
.swiper-container {
    height: 140px;
}
.swiper-slide {
    
}
 .swiper-slide img{
     width:85px;
     height: 115px;
 }
 .seegrade {
     position: absolute;
    left: 4px;
    bottom: 30px;
    color: #faaf00;
    font-size: 11px;
    font-weight: 600;
 }
 .filmname {
     position:absolute;
     bottom: 10px;
     left:10px;
     font-size: 12px;
     padding-left: 10px;
 }
.van-card__thumb img{
    width:66px;
    height: 94px;
    border-radius: 0;
}
.title {
    display: inline-block;
    font-size: 17px;
    color: #333;
    font-weight: 700;
    padding-right: 5px;
    margin-bottom: 5px;
}
.desc {
    font-size: 13px;
    color: #666;
}
.grade {
    font-weight: 700;
    color: #faaf00;
    font-size: 15px;
}
.wish {
    color: #faaf00;
    font-size: 15px;
    font-weight: 600;
}
.type {
    display: inline-block;
    width:45px;
    border:1px solid #509FC9;
    border-left: 0;
}
.typenum {
    display: inline-block;
    width:20px;
    height: 15px;
    color:white;
    text-align: center;
    background-color: #509FC9;
}
.imax {
    display: inline-block;
    text-align: center;
    width: 25px;
    height: 15px;
    color:#509FC9;
}
.van-card__footer {
    width:20%;
    position: absolute;
    top:20px;
    right:10px;
}
</style> 